<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    {{msg}}
    <hr>
  </div>

  <script>

    var vm = new Vue({
      //选项
      // el: "#app",
      //数据驱动视图
      data: {
        msg: "helloworld",
      },
      beforeCreate() {
        //访问不到data下面的属性
        console.log('beforeCreate', this.msg)
      },
      created() {
        //可以访问data下面的属性，发送ajax请求，最早可以在这里
        console.log('created', this.msg)
      },
      beforeMount() {
        //真实的dom还没有渲染输出
        console.log('beforeMount', this.msg)
        console.log(document.getElementById("app").innerHTML)
      },
      mounted() {
        console.log('mounted')
        console.log(document.getElementById("app").innerHTML)
      },
      beforeUpdate() {
        //可以读取数据，不能修改数据
        console.log('beforeUpdate', this.msg)
      },
      updated() {
        //可以读取数据，不能修改数据
        console.log('updated', this.msg)
      },
      beforeDestroy() {
        console.log('beforeDestory')
      },
      destroyed() {
        console.log('destoryed')
      }


    }).$mount("#app")
  </script>

</body>

</html>